<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('持有物业项目租金表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('租户')" prop="lessee">
        <el-input
          v-model="queryParams.lessee"
          :placeholder="$t('租户')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <!--      <el-form-item :label="$t('租约名称')" prop="leaseName">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.leaseName"-->
      <!--          :placeholder="$t('租约名称')"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="queryHandle"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item :label="$t('房号')" prop="roomNumber">
        <el-input
          v-model="queryParams.roomNumber"
          :placeholder="$t('房号')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('租用状态')" prop="leaseStatus">
        <dict-select
          v-model="queryParams.leaseStatus"
          dictionary="lease_status"
          :placeholder="$t('租用状态')"
        />
      </el-form-item>
      <el-form-item :label="$t('租金起止月')" prop="leaseStartDate">
        <el-date-picker
          v-model="dateRange"
          style="width: 400px"
          type="monthrange"
          value-format="yyyy-MM"
          format="yyyy-MM"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" />

    <el-table v-loading="loading" :data="dealLeaseList" border tooltip-effect="darkTable">
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50" fixed="left">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="dealName" :label="$t('项目名称')" show-overflow-tooltip min-width="180" fixed="left">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,dealType:scope.row.dealType,companyId:scope.row.companyId}}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t(year)+ $t('年到期')" align="center" prop="year" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="new Date(scope.row.leaseEndDate).getFullYear() === year">{{ parseTime(scope.row.leaseEndDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t(year + 1)+ $t('年到期')" align="center" prop="year" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="new Date(scope.row.leaseEndDate).getFullYear() === year + 1">{{ parseTime(scope.row.leaseEndDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t(year + 2)+ $t('年到期')" align="center" prop="year" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="new Date(scope.row.leaseEndDate).getFullYear() === year + 2">{{ parseTime(scope.row.leaseEndDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('租户')" align="center" prop="lessee" min-width="180" show-overflow-tooltip />
      <el-table-column :label="$t('房号')" align="center" prop="roomNumberName" min-width="300" show-overflow-tooltip />
      <el-table-column :label="$t('租期')" align="center" prop="leaseName" min-width="300" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.leaseStartDate) + '~' + parseTime(scope.row.leaseEndDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('租赁面积(㎡)')" align="center" prop="leaseCoveredArea" min-width="180">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.leaseCoveredArea) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('租用状态')" align="center" prop="leaseEndDate" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.lease"> {{ $t('终止') }} </span>
          <span v-else-if="!scope.row.lease && date.getTime() > new Date(scope.row.leaseEndDate).getTime()"> {{ $t('过期') }} </span>
          <span v-else> {{ $t('有效') }} </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('日租金标准(元/天/平方米)')" align="left" prop="dayRent" min-width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            <div v-for="(value,index) in scope.row.dealLeaseStandardList" :key="index">
              <span>{{ parseTime(value.standStartDate) + '~' + parseTime(value.standEndDate) + '：' +moneyFormat(value.rentStandard*12/365) + '元' }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('月租金标准(元/月/平方米)')" align="left" prop="dayRent" min-width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            <div v-for="(value,index) in scope.row.dealLeaseStandardList" :key="index">
              <span>{{ parseTime(value.standStartDate) + '~' + parseTime(value.standEndDate) + '：' + moneyFormat(value.rentStandard) + '元' }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('月租金金额(元)')" align="left" prop="dayRent" min-width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            <div v-for="(value,index) in scope.row.dealLeaseStandardList" :key="index">
              <span>{{ parseTime(value.standStartDate) + '~' + parseTime(value.standEndDate) + '：' + moneyFormat(value.rentStandard * scope.row.leaseCoveredArea) + '元' }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('押金(元)')" align="center" prop="leaseDetainMoney" min-width="180">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.leaseDetainMoney) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('租约总计')" align="center" prop="leaseDetainMoney" min-width="180">
        <el-table-column :label="$t('应收(元)')" align="center" prop="receivableRent" min-width="180">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.monthReceivableRent) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('实收(元)')" align="center" prop="paidInRent" min-width="180">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.monthPaidInRent) }}</span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column v-for="(value,index) in mouthList" v-show="mouthList" :key="index" min-width="180" align="center" :label="$t(value.years)">
        <el-table-column :label="$t('应收(元)')" align="center" prop="receivableRent" min-width="180">
          <template slot-scope="scope">
            <div v-for="(value1,index1) in scope.row.dealLeaseRentList" :key="index1">
              <span v-if="parseTime(value1.years) === value.year">{{ value1.receivableRent }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('实收(元)')" align="center" prop="receivableRent" min-width="180">
          <template slot-scope="scope">
            <div v-for="(value1,index1) in scope.row.dealLeaseRentList" :key="index1">
              <span v-if="parseTime(value1.years) === value.year">{{ value1.paidInRent }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="$t('合计')" align="center" prop="leaseDetainMoney" min-width="180">
        <el-table-column :label="$t('应收合计(元)')" align="center" prop="receivableRent" min-width="180">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.receivableRent) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('实收合计(元)')" align="center" prop="paidInRent" min-width="180">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.paidInRent) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改租约管理对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealLeaseForm ref="dealLeaseForm" />
    </el-dialog>
  </div>
</template>

<script>
  import { reportListDealLease } from '@/api/deal/immovable/dealLease'
  import dealLeaseForm from '@/views/deal/immovable/dealLeaseForm.vue'
  export default {
    components: {
      dealLeaseForm
    },
    data() {
      return {
        // 月应缴实缴列
        mouthList: [],
        year: new Date().getFullYear(),
        date: new Date(),
        dateRange: [new Date().getFullYear() + '-01' + '-01', new Date().getFullYear() + '-12' + '-01'],
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 租约管理表格数据
        dealLeaseList: [],
        // 弹出层标题
        title: '租约管理',
        // 是否显示弹出层
        formOpen: false,
        // 查询参数
        queryParams: {
          dealName: undefined,
          leaseStatus: undefined,
          lessee: undefined,
          leaseName: undefined,
          roomNumber: undefined,
          beginTime: undefined,
          endTime: undefined,
          pageNum: 1,
          pageSize: 10
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询租约管理列表 */
      getList() {
        this.loading = true
        if (this.dateRange != null && this.dateRange.length > 1) {
          this.queryParams.beginTime = this.parseTime(this.dateRange[0])
          this.queryParams.endTime = this.parseTime(this.dateRange[1])
          // 生成租金年月列
          this.mouthList = []
          let date1 = this.queryParams.beginTime.split('-')
          date1 = parseInt(date1[0]) * 12 + parseInt(date1[1])
          let date0 = this.queryParams.endTime.split('-')
          date0 = parseInt(date0[0]) * 12 + parseInt(date0[1])
          const number = (date0 - date1) + 1
          for (let i = 0; i < number; i++) {
            const currentDate = new Date(this.queryParams.beginTime)
            const nextDate = this.parseTime(currentDate.setMonth(currentDate.getMonth() + i), '{y}-{m}').split('-')
            const row = {
              years: nextDate[0] + '年' + nextDate[1] + '月',
              year: nextDate[0] + '-' + nextDate[1] + '-' + '01'
            }
            if (!(this.mouthList instanceof Array)) {
              this.$set(this, 'mouthList', [])
            }
            this.$nextTick(() => {
              this.mouthList.push(row)
            })
          }
          console.log(this.mouthList)
        } else {
          this.dateRange = []
          this.mouthList = []
          this.queryParams.beginTime = undefined
          this.queryParams.endTime = undefined
        }
        reportListDealLease(this.queryParams).then(response => {
          this.dealLeaseList = response.rows
          console.log(this.dealLeaseList)
          this.total = response.total
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },

      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          dealId: undefined,
          leaseName: undefined,
          lessee: undefined,
          industry: undefined,
          lease: undefined,
          roomNumber: undefined,
          leaseCoveredArea: undefined,
          leaseStartDate: undefined,
          leaseEndDate: undefined,
          leaseDetainMoney: undefined,
          rentCollectionFrequency: undefined,
          remark: undefined,
          delFlag: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.dateRange = []
        this.dateRange = [new Date().getFullYear() + '-01' + '-01', new Date().getFullYear() + '-12' + '-01']
        this.queryParams.beginTime = undefined
        this.queryParams.endTime = undefined
        this.resetForm('queryForm')
        this.queryHandle()
      },
      /** 修改按钮操作 */
      updateHandle(row) {
        this.formOpen = true
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.dealLeaseForm.init(row)
        })
      }
    }
  }
</script>
